<template>
  <div class="app-container">
    <div>
      <el-input v-model="searchname" placeholder="输入完整员工姓名" style="width: 300px" size="small">
        <el-button slot="append" icon="el-icon-search" @click="clickSearch">搜索</el-button>
      </el-input>

      <span style="padding-left: 30px">
        <el-button type="primary" size="small" @click="showAddUserDialog">新增员工</el-button>
      </span>
      <div style="padding: 5px 0px 5px 0px;">
        <el-tag type="warning">配置说明：1、入职、转正、离职前，先需完成对应申请流程 2、员工离职后所有数据不可操作,其部门和岗位数据将自动解除</el-tag>
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
    >
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sta=='试用'" type="warning">{{ scope.row.sta }}</el-tag>
          <el-tag v-if="scope.row.sta=='在职'" type="success">{{ scope.row.sta }}</el-tag>
          <el-tag v-if="scope.row.sta=='离职'" type="info">{{ scope.row.sta }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="姓名工号" width="80px">
        <template slot-scope="scope">
          <span style="color: royalblue;font-weight: bold;">{{ scope.row.name }}</span><br>
          <i>{{ scope.row.uid }}</i>
        </template>
      </el-table-column>

      <el-table-column label="性别" align="center" width="50px">
        <template slot-scope="scope">
          {{ scope.row.gender }}
        </template>
      </el-table-column>

      <el-table-column label="员工类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.leixing }}
        </template>
      </el-table-column>
      <el-table-column label="职级" align="center">
        <template slot-scope="scope">
          {{ scope.row.zhiji }}
        </template>
      </el-table-column>

      <el-table-column label="部门" align="center">
        <template slot-scope="scope">
          {{ scope.row.departmentName }}
        </template>
      </el-table-column>

      <el-table-column label="岗位" align="center">
        <template slot-scope="scope">
          {{ scope.row.positionName }}
        </template>
      </el-table-column>

      <el-table-column label="角色" align="center">
        <template slot-scope="scope">
          {{ scope.row.roleName }}
        </template>
      </el-table-column>

      <el-table-column label="通讯录排序" align="center">
        <template slot-scope="scope">
          {{ scope.row.srt }}
        </template>
      </el-table-column>

      <el-table-column label="联系方式" width="200px">
        <template slot-scope="scope">
          <i class="el-icon-phone" /> {{ scope.row.phone }}<br>
          <i class="el-icon-message" /> {{ scope.row.email }}
        </template>
      </el-table-column>

      <el-table-column label="入职时间" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.ruzhiDate!='Invalid date'"> {{ scope.row.ruzhiDate }}</div>
        </template>
      </el-table-column>
      <el-table-column label="转正时间" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.zhuanzhengDate!='Invalid date'"> {{ scope.row.zhuanzhengDate }}</div>
        </template>
      </el-table-column>
      <el-table-column label="离职时间" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.lizhiDate!='Invalid date'"> {{ scope.row.lizhiDate }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="350px">
        <template v-if="scope.row.sta!=='离职'" slot-scope="scope">
          <el-button-group>
            <el-button
              v-if="scope.row.sta=='试用'"
              type="warning"
              size="mini"
              plain
              @click="onClickZhuanzheng(scope.row.uid)"
            >转正</el-button>
            <el-button type="primary" size="mini" plain @click="clickModifyUser(scope.$index)">编辑</el-button>

            <!-- <el-button type="primary" size="mini" plain @click="onClickModifyPassword(scope.row.uid)">密码重置</el-button> -->
            <el-button
              v-if="scope.row.sta=='试用' || scope.row.sta=='在职'"
              type="danger"
              size="mini"
              plain
              @click="onClickLizhi(scope.row.uid)"
            >离职</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px" />
    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageCount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataTotal"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />

    <el-dialog title="请输入新密码" width="50%" :visible.sync="modifyPwdDialogVisible">
      <el-form>
        <el-form-item label="新密码">
          <el-input v-model="modifyPwdNew" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyPwdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyPasswordConform">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑员工信息" :visible.sync="modifyUserDialog.visible" width="50%" :close-on-click-modal="false">
      <div>
        <el-form ref="form" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="工号">
                {{ modifyUserDialog.uid }}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="名称">
                <el-input v-model="modifyUserDialog.name" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="性别">
                <el-select v-model="modifyUserDialog.gender">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="上级主管">
                <!-- <el-cascader v-model="modifyUserDialog.upper" :options="userList" clearable /> -->
                <el-select v-model="modifyUserDialog.upper" placeholder="请选择">
                  <el-option v-for="(item, idx) in users" :key="idx" :label="item.name" :value="item.uid" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号">
                <el-input v-model="modifyUserDialog.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱">
                <el-input v-model="modifyUserDialog.email" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="部门">
                <el-select v-model="modifyUserDialog.department">
                  <el-option v-for="item1 in departmentList" :key="item1.id" :label="item1.name" :value="item1.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="岗位">
                <el-select v-model="modifyUserDialog.position">
                  <el-option v-for="item2 in positionList" :key="item2.id" :label="item2.name" :value="item2.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="角色">
                <el-select v-model="modifyUserDialog.role">
                  <el-option v-for="item3 in roleList" :key="item3.id" :label="item3.name" :value="item3.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="员工性质">
                <el-select v-model="modifyUserDialog.xingzhi">
                  <el-option label="在编人员" value="在编人员" />
                  <el-option label="企业人员" value="企业人员" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职级">
                <el-select v-model="modifyUserDialog.zhiji">
                  <el-option label="无职级" value="无职级" />
                  <el-option label="正处" value="正处" />
                  <el-option label="副处" value="副处" />
                  <el-option label="正科" value="正科" />
                  <el-option label="副科" value="副科" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工类型">
                <el-select v-model="modifyUserDialog.leixing">
                  <el-option label="无类型" value="无类型" />
                  <el-option label="全职" value="全职" />
                  <el-option label="兼职" value="兼职" />
                  <el-option label="实习" value="实习" />
                  <el-option label="劳务派遣" value="劳务派遣" />
                  <el-option label="退休返聘" value="退休返聘" />
                  <el-option label="劳务外包" value="劳务外包" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="modifyUserDialog.remark" type="textarea" />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="通讯录排序">
                <el-input v-model="modifyUserDialog.srt" type="number" />
                <div style="color:red;font-size: 12px;">此处仅用于控制通讯录显示排序，数值越大位置越靠前</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyUserDialog.visible = false">关 闭</el-button>
        <el-button type="primary" @click="modifyUser">修 改</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增员工" :visible.sync="addUserDialog.visible" width="50%" :close-on-click-modal="false">
      <div>
        <el-form ref="form" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="工号">
                <el-input v-model="addUserDialog.uid" type="number" placeholder="纯数字工号,需保证唯一,创建后不可更改" />
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="addUserDialog.phone" />
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="addUserDialog.name" placeholder="填写员工真实姓名" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="addUserDialog.email" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select v-model="addUserDialog.gender">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>

              <el-form-item label="上级主管">
                <!-- <el-cascader v-model="addUserDialog.upper" :options="userList" clearable /> -->
                <el-select v-model="addUserDialog.upper" placeholder="请选择">
                  <el-option v-for="(item, idx) in users" :key="idx" :label="item.name" :value="item.uid" />
                </el-select>
              </el-form-item>
              <el-form-item label="入职日期">
                <el-date-picker v-model="addUserDialog.ruzhiDate" type="date" placeholder="选择入职日期" />
              </el-form-item>

            </el-col>
            <el-col :span="8">
              <el-form-item label="员工性质">
                <el-select v-model="addUserDialog.xingzhi">
                  <el-option label="在编人员" value="在编人员" />
                  <el-option label="企业人员" value="企业人员" />
                </el-select>
              </el-form-item>
              <el-form-item label="职级">
                <el-select v-model="addUserDialog.zhiji">
                  <el-option label="无职级" value="无职级" />
                  <el-option label="正处" value="正处" />
                  <el-option label="副处" value="副处" />
                  <el-option label="正科" value="正科" />
                  <el-option label="副科" value="副科" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工类型">
                <el-select v-model="addUserDialog.leixing">
                  <el-option label="无类型" value="无类型" />
                  <el-option label="全职" value="全职" />
                  <el-option label="兼职" value="兼职" />
                  <el-option label="实习" value="实习" />
                  <el-option label="劳务派遣" value="劳务派遣" />
                  <el-option label="退休返聘" value="退休返聘" />
                  <el-option label="劳务外包" value="劳务外包" />
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="addUserDialog.sta">
                  <el-option label="试用" value="试用" />
                  <el-option label="在职" value="在职" />
                  <el-option label="离职" value="离职" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item v-for="(item, idx) in addUserDialog.departPoses" :key="idx" label="部门">
                <el-select v-model="addUserDialog.departPoses[idx].department">
                  <el-option v-for="item1 in departmentList" :key="item1.id" :label="item1.name" :value="item1.id" />
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="8">
              <el-form-item v-for="(item, idx) in addUserDialog.departPoses" :key="idx" label="岗位">
                <el-select v-model="addUserDialog.departPoses[idx].position">
                  <el-option v-for="item2 in positionList" :key="item2.id" :label="item2.name" :value="item2.id" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item v-for="(item, idx) in addUserDialog.departPoses" :key="idx" label="角色">
                <el-select v-model="addUserDialog.departPoses[idx].role">
                  <el-option v-for="item3 in roleList" :key="item3.id" :label="item3.name" :value="item3.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="24">
              <el-form-item label="通讯录排序">
                <el-input v-model="addUserDialog.srt" type="number" />
                <div style="color:red;font-size: 12px;">此处仅用于控制通讯录显示排序，数值越大位置越靠前</div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="addUserDialog.remark" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="电子签名">
                <el-upload
                  ref="attaches"
                  :action="uploadUrl"
                  list-type="picture-card"
                  :on-success="onUploadSignSuccess1"
                  :limit="1"
                  :on-remove="handleRemoveFile"
                >
                  <i class="el-icon-plus" />
                </el-upload>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialog.visible = false">关 闭</el-button>
        <el-button type="primary" @click="clickAddUser()">添 加</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  addUser
} from '@/api/user'
import {
  Message,
  MessageBox
} from 'element-ui'
import {
  websock
} from '@/websock'

export default {
  filters: {
    statusFilter(sta) {
      const statusMap = {
        1: 'info',
        2: 'success',
        3: 'danger'
      }
      return statusMap[sta]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      userList: [],
      users: [],
      pageIndex: 1,
      pageCount: 10,
      searchname: '', // 要搜索员工的姓名
      dataTotal: 0,
      modifyPwdDialogVisible: false,
      modifyPwdUid: 0, // 需要修改密码的员工id
      modifyPwdNew: '', // 新密码
      departmentList: null,
      positionList: null,
      roleList: null,
      uploadUrl: process.env.VUE_APP_BASE_API + '/oa/uploadFile',
      // 添加员工
      addUserDialog: {
        visible: false,
        uid: '',
        name: '',
        gender: '未知',
        xingzhi: '在编人员',
        leixing: '无类型',
        upper: '', // 上级主管
        departPoses: [{ // 岗位
          department: '',
          position: '',
          role: ''
        }],
        zhiji: '无职级',
        phone: '',
        email: '',
        signimg: '',
        ruzhiDate: '',
        sta: '在职',
        srt: 0,
        remark: ''
      },
      // 编辑信息
      modifyUserDialog: {
        visible: false,
        uid: '',
        upper: '',
        name: '',
        phone: '',
        email: '',
        gender: '',
        xingzhi: '',
        leixing: '',
        zhiji: '',
        department: '',
        position: '',
        role: '',
        srt: 0,
        remark: ''
      }
    }
  },
  async created() {
    this.getUserList()

    websock.getDepartList().then((data) => {
      this.departmentList = data
    })

    websock.getPosList().then((data) => {
      this.positionList = data
    })

    websock.getRoleList().then((data) => {
      this.roleList = [{ id: 0, name: '无' }, ...data]
    })

    const res = await websock.getContactList()
    console.log('created', res)
    const userList = []
    for (let i = 0; i !== res.length; i++) {
      userList.push({
        value: i + '',
        label: res[i].name,
        children: []
      })
      for (let j = 0; j !== res[i].userList.length; j++) {
        userList[i].children.push({
          value: res[i].userList[j].uid,
          label: res[i].userList[j].name
        })
      }
    }
    this.userList = userList

    websock.getAllUsers().then(res => {
      this.users = res
    })
  },
  methods: {
    async getUserList() {
      this.listLoading = true
      const data = await websock.userList({
        pageIndex: this.pageIndex,
        pageCount: this.pageCount,
        name: this.searchname || ''
      })
      this.listLoading = false
      this.list = data.list
      this.dataTotal = data.count
    },
    onPageSizeChange(val) {
      this.pageCount = val
      this.getUserList()
    },
    onCurrentPageChange(val) {
      this.pageIndex = val
      this.getUserList()
    },
    // 点击修改密码
    onClickModifyPassword(uid) {
      console.log('modify password ', uid)
      this.modifyPwdUid = uid
      this.modifyPwdNew = ''
      this.modifyPwdDialogVisible = true
    },
    async onClickZhuanzheng(uid) {
      MessageBox.confirm('是否转正', '是否转正', {
        confirmButtonText: '转正',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await websock.userZhuanzheng({
          uid
        })
        this.getUserList()
      })
    },
    async onClickLizhi(uid) {
      MessageBox.confirm('是否离职', '是否离职', {
        confirmButtonText: '离职',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await websock.userLizhi({
          uid
        })
        this.getUserList()
      })
    },
    // 确认修改密码
    async modifyPasswordConform() {
      this.modifyPwdDialogVisible = false
      await websock.modifyPwd({
        uid: this.modifyPwdUid,
        pwd: this.modifyPwdNew
      })
      this.getUserList()
    },
    // 显示添加员工界面
    showAddUserDialog() {
      this.addUserDialog.visible = true
      this.addUserDialog.uid = ''
      this.addUserDialog.name = ''
      this.addUserDialog.gender = '未知'
      this.addUserDialog.xingzhi = '在编人员'
      this.addUserDialog.zhiji = '无职级'
      this.addUserDialog.upper = ''
      this.addUserDialog.phone = ''
      this.addUserDialog.email = ''
      this.addUserDialog.signimg = ''
      this.addUserDialog.ruzhiDate = ''
      this.addUserDialog.sta = '在职'
      this.addUserDialog.remark = ''
      this.addUserDialog.srt = 0

      this.addUserDialog.departPoses = [{
        department: '',
        position: '',
        role: ''
      }]

      if (this.$refs.attaches) this.$refs.attaches.uploadFiles = []
    },
    clickAddUser() {
      if (!this.addUserDialog.uid) {
        return Message({
          message: '请输入工号',
          type: 'error',
          duration: 3 * 1000
        })
      }
      if (!this.addUserDialog.name) {
        return Message({
          message: '请输入姓名',
          type: 'error',
          duration: 3 * 1000
        })
      }
      if (!this.addUserDialog.phone) {
        return Message({
          message: '请输入手机号',
          type: 'error',
          duration: 3 * 1000
        })
      }
      if (!this.addUserDialog.email) {
        return Message({
          message: '请输入邮箱',
          type: 'error',
          duration: 3 * 1000
        })
      }
      if (!this.addUserDialog.ruzhiDate) {
        return Message({
          message: '请选择入职日期',
          type: 'error',
          duration: 3 * 1000
        })
      }
      if (!this.addUserDialog.sta) {
        return Message({
          message: '请输入工号',
          type: 'error',
          duration: 3 * 1000
        })
      }
      if (!this.addUserDialog.upper) {
        return Message({
          message: '请选择上级主管',
          type: 'error',
          duration: 3 * 1000
        })
      }

      if (this.addUserDialog.departPoses.length <= 0) {
        return Message({
          message: '请输入岗位信息',
          type: 'error',
          duration: 3 * 1000
        })
      }

      const departMap = {}
      for (let i = 0; i !== this.addUserDialog.departPoses.length; i++) {
        if (!this.addUserDialog.departPoses[i].department || !this.addUserDialog.departPoses[i].position) {
          return Message({
            message: '请输入完整信息',
            type: 'error',
            duration: 3 * 1000
          })
        }
        departMap[this.addUserDialog.departPoses[i].department] = 1
      }

      if (Object.getOwnPropertyNames(departMap).length < this.addUserDialog.departPoses.length) {
        return Message({
          message: '同一部门只能添加1个岗位',
          type: 'error',
          duration: 3 * 1000
        })
      }

      this.addUserDialog.visible = false
      addUser({
        uid: this.addUserDialog.uid,
        name: this.addUserDialog.name,
        gender: this.addUserDialog.gender,
        xingzhi: this.addUserDialog.xingzhi,
        leixing: this.addUserDialog.leixing,
        upper: this.addUserDialog.upper || null,
        zhiji: this.addUserDialog.zhiji,
        phone: this.addUserDialog.phone,
        email: this.addUserDialog.email,
        signimg: this.addUserDialog.signimg,
        ruzhiDate: this.addUserDialog.ruzhiDate,
        departPoses: this.addUserDialog.departPoses,
        sta: this.addUserDialog.sta,
        remark: this.addUserDialog.remark,
        srt: this.addUserDialog.srt
      }).then(() => {
        this.getUserList()
      })
    },
    clickSearch() {
      this.getUserList()
    },
    getStaStr(sta) {
      if (sta === 1) {
        return '试用'
      } else if (sta === 2) {
        return '转正'
      } else if (sta === 3) {
        return '离职'
      }
      return ''
    },
    // 点击编辑员工
    clickModifyUser(idx) {
      this.modifyUserDialog.visible = true

      this.modifyUserDialog.uid = this.list[idx].uid
      this.modifyUserDialog.name = this.list[idx].name
      this.modifyUserDialog.upper = this.list[idx].upper
      this.modifyUserDialog.gender = this.list[idx].gender
      this.modifyUserDialog.phone = this.list[idx].phone
      this.modifyUserDialog.email = this.list[idx].email
      this.modifyUserDialog.leixing = this.list[idx].leixing
      this.modifyUserDialog.xingzhi = this.list[idx].xingzhi
      this.modifyUserDialog.zhiji = this.list[idx].zhiji
      this.modifyUserDialog.department = this.list[idx].department
      this.modifyUserDialog.position = this.list[idx].position
      this.modifyUserDialog.role = this.list[idx].role
      this.modifyUserDialog.remark = this.list[idx].remark
      this.modifyUserDialog.srt = this.list[idx].srt
    },
    // 编辑员工
    async modifyUser() {
      this.modifyUserDialog.visible = false
      await websock.modifyUserInfo({
        uid: this.modifyUserDialog.uid,
        name: this.modifyUserDialog.name,
        upper: this.modifyUserDialog.upper,
        gender: this.modifyUserDialog.gender,
        phone: this.modifyUserDialog.phone,
        email: this.modifyUserDialog.email,
        leixing: this.modifyUserDialog.leixing,
        xingzhi: this.modifyUserDialog.xingzhi,
        zhiji: this.modifyUserDialog.zhiji,
        department: this.modifyUserDialog.department,
        position: this.modifyUserDialog.position,
        role: this.modifyUserDialog.role,
        remark: this.modifyUserDialog.remark,
        srt: this.modifyUserDialog.srt
      })
      this.getUserList()
    },
    handleRemoveFile(f) {
      this.addUserDialog.signimg = ''
    },
    onUploadSignSuccess1(res, file) {
      this.addUserDialog.signimg = res.data
    }
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
